import React, { useState, useEffect } from 'react'

// jsx 对象 React.createElement('div',{className='hello'},'Hello World!')
// React.createElement('div', null, 'Hello World!')
const Hello = () => <div className='hello'>Hello World!</div>
// console.log(Object.prototype.toString.call(Hello));//[object Object]
// 1. JSX 优秀 创新的 UI组件
// 2. JSX -> babel -> 转移React.createElement(...)

// Index
const Index = () => {
  // state 是自有的,可以做到响应式,
  // 一般放在父组件里头声明,以便于多个子组件共享数据!
  // 子组件 不添加自由状态 一般直接用props引入. 除非就是自身状态与外部无关
  const [users, setUsers] = useState([{
    name: 'Cavan',
    age: 18,
    id: 1
  }, {
    name: 'Yan',
    age: 17,
    id: 2
  }, {
    name: 'Youzi',
    age: 16,
    id: 3
  }])

  // 生命周期函数 onload onDOMContentLoaded
  // Component useEffect 表示 onDOMContentLoaded 组件已经挂载上去了
  // 组件加载好了后 再做里面的内容
  useEffect(() => {
    console.log('组件加载好了噢');
    setTimeout(() => {
      setUsers([...users,
      {
        name: 'Youzi',
        age: 16,
        id: 4
      }])
    }, 2000)
  }, [])

  return (
    // 如果唯一的父元素,只起到包裹作用,而不需要标签,省略标签名
    <>
      <Header />
      <Main users={users} />
      <Footer count={users.length} />
    </>
  )
}

const Header = () => {
  return (
    <div>
      <Title title="首页" />
    </div>
  )
}
// props 父组件传过来的所有参数的集合
// 当父组件的数据要在子组件中共享数据 用props
const Title = (props) => {
  return (
    <div>
      {props.title}
    </div>
  )
}
// { users } 也是 props
const Main = ({ users }) => {
  return (
    <main>
      Main
      <ul>
        {/* 循环输出 要个key是个unique的 */}
        {users.map(user => <li key={user.id}>{user.name}--{user.age}--{user.id}</li>)}
      </ul>
    </main>
  )
}
const Footer = ({ count }) => {
  return (
    <footer>
      Footer,有{count}位用户~
    </footer>
  )
}

function App() {
  return (<Index />)
  // return <Hello />
  // return React.createElement('div', null, 'Hello World!')
}

export default App
